<template>
  <div class="page-box">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>MetaMask</span>
          <el-link type="primary" href="https://docs.metamask.io/" target="_blank">Docs</el-link>
        </div>
      </template>
      <div class="card-content">
        <div class="item">
          <p class="title">1. 连接MetaMask</p>
          <f-code :code="codeRequest" />
        </div>
        <div class="item">
          <p class="title">2. 切换到Mainnet主网</p>
          <f-code :code="codeSwitch" />
        </div>
        <div class="item">
          <p class="title">3. 添加BSC网络</p>
          <f-code :code="codeAddNetwork" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import FCode from '@/components/f-code/index.vue'
import { ref } from 'vue'

const codeRequest = ref(`
window.ethereum.request({ method: 'eth_requestAccounts' })
`)
const codeSwitch = ref(`
window.ethereum.request({
  method: 'wallet_switchEthereumChain',
  params: [
    {
      chainId: '0x1',
    },
  ],
})
`)
const codeAddNetwork = ref(`
await window.ethereum.request({
  method: 'wallet_addEthereumChain',
  params: [
    {
      chainId: "0x38",
      chainName: "Binance Smart Chain Mainnet",
      nativeCurrency: "BNB",
      rpcUrls: ["https://rpc-bsc.bnb48.club"],
      blockExplorerUrls: ["https://bscscan.com"],
    },
  ],
})
`)
</script>

<style scoped lang="less"></style>
